<template>
  <view class="container map-container">
    <view class="map-wrapper">
      <!-- 腾讯地图容器 -->
      <view class="tx-map" id="map"></view>
      
      <!-- 控制面板 -->
      <view class="control-panel">
        <view class="panel-item" @click="switchTo3D">
          <text class="panel-text">3D模式</text>
        </view>
        <view class="panel-item" @click="resetView">
          <text class="panel-text">重置视图</text>
        </view>
        <view class="panel-item" @click="toggleModelReplace">
          <text class="panel-text">{{isModelReplaced ? '恢复原建筑' : '替换模型'}}</text>
        </view>
      </view>
      
      <!-- 加载提示 -->
      <view class="loading" v-if="loading">
        <view class="loading-icon"></view>
        <text class="loading-text">{{loadingText}}</text>
      </view>
      
      <!-- 建筑信息弹窗 -->
      <view class="building-info" v-if="showBuildingInfo">
        <view class="info-header">
          <text class="info-title">{{buildingInfo.name}}</text>
          <text class="info-close" @click="closeBuildingInfo">×</text>
        </view>
        <view class="info-content">
          <text class="info-item">类型：{{buildingInfo.type}}</text>
          <text class="info-item">高度：{{buildingInfo.height}}米</text>
          <text class="info-item">面积：{{buildingInfo.area}}平方米</text>
          <text class="info-item">描述：{{buildingInfo.description}}</text>
        </view>
        <view class="info-footer">
          <button class="info-btn" @click="viewBuildingDetail">查看详情</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
// 引入地图工具类
import MapManager from '../../utils/map-manager.js';
import ModelManager from '../../utils/model-manager.js';
import { buildingConfig } from '../../config/building-config.js';

export default {
  data() {
    return {
      mapManager: null,      // 地图管理器
      modelManager: null,    // 模型管理器
      loading: true,         // 加载状态
      loadingText: '地图加载中...',
      isModelReplaced: false, // 模型是否已替换
      showBuildingInfo: false, // 是否显示建筑信息
      buildingInfo: {        // 建筑信息
        name: '',
        type: '',
        height: 0,
        area: 0,
        description: ''
      },
      currentBuilding: null,  // 当前选中的建筑
    }
  },
  onLoad() {
    this.initMap();
  },
  onReady() {
    // 页面渲染完成
  },
  onUnload() {
    // 页面卸载时释放资源
    if (this.mapManager) {
      this.mapManager.destroy();
    }
    if (this.modelManager) {
      this.modelManager.destroy();
    }
  },
  methods: {
    // 初始化地图
    async initMap() {
      try {
        this.loading = true;
        this.loadingText = '地图加载中...';
        
        // 创建地图管理器
        this.mapManager = new MapManager('map');
        await this.mapManager.initMap();
        
        // 创建模型管理器
        this.modelManager = new ModelManager(this.mapManager.map);
        
        // 注册地图事件
        this.registerMapEvents();
        
        this.loading = false;
      } catch (error) {
        console.error('地图初始化失败:', error);
        this.loadingText = '地图加载失败，请重试';
        uni.showToast({
          title: '地图加载失败',
          icon: 'none'
        });
      }
    },
    
    // 注册地图事件
    registerMapEvents() {
      // 点击建筑物
      this.mapManager.on('building_click', (building) => {
        console.log('点击建筑物:', building);
        this.currentBuilding = building;
        
        // 检查是否是可替换的建筑物
        const buildingData = buildingConfig.find(item => item.id === building.id);
        if (buildingData) {
          this.showBuildingDetail(buildingData);
        }
      });
      
      // 地图加载完成
      this.mapManager.on('map_loaded', () => {
        console.log('地图加载完成');
        // 预加载模型资源
        this.preloadModels();
      });
    },
    
    // 预加载模型资源
    async preloadModels() {
      try {
        this.loadingText = '模型资源加载中...';
        this.loading = true;
        
        // 预加载所有配置的模型
        for (const building of buildingConfig) {
          await this.modelManager.preloadModel(building.modelUrl);
        }
        
        this.loading = false;
        uni.showToast({
          title: '资源加载完成',
          icon: 'success'
        });
      } catch (error) {
        console.error('模型预加载失败:', error);
        this.loading = false;
        uni.showToast({
          title: '部分资源加载失败',
          icon: 'none'
        });
      }
    },
    
    // 切换到3D模式
    switchTo3D() {
      if (this.mapManager) {
        this.mapManager.switchTo3D();
        uni.showToast({
          title: '已切换到3D模式',
          icon: 'none'
        });
      }
    },
    
    // 重置视图
    resetView() {
      if (this.mapManager) {
        this.mapManager.resetView();
      }
    },
    
    // 切换模型替换状态
    async toggleModelReplace() {
      if (!this.currentBuilding) {
        uni.showToast({
          title: '请先选择一个建筑物',
          icon: 'none'
        });
        return;
      }
      
      try {
        this.loading = true;
        this.loadingText = this.isModelReplaced ? '恢复原建筑中...' : '替换模型中...';
        
        const buildingData = buildingConfig.find(item => item.id === this.currentBuilding.id);
        if (!buildingData) {
          throw new Error('未找到建筑物配置');
        }
        
        if (this.isModelReplaced) {
          // 恢复原建筑
          await this.modelManager.restoreBuilding(this.currentBuilding.id);
        } else {
          // 替换为自定义模型
          await this.modelManager.replaceBuilding(this.currentBuilding, buildingData.modelUrl);
        }
        
        this.isModelReplaced = !this.isModelReplaced;
        this.loading = false;
        
        uni.showToast({
          title: this.isModelReplaced ? '模型替换成功' : '已恢复原建筑',
          icon: 'success'
        });
      } catch (error) {
        console.error('模型替换失败:', error);
        this.loading = false;
        uni.showToast({
          title: '操作失败，请重试',
          icon: 'none'
        });
      }
    },
    
    // 显示建筑详情
    showBuildingDetail(buildingData) {
      this.buildingInfo = {
        name: buildingData.name,
        type: buildingData.type,
        height: buildingData.height,
        area: buildingData.area,
        description: buildingData.description
      };
      this.showBuildingInfo = true;
    },
    
    // 关闭建筑信息
    closeBuildingInfo() {
      this.showBuildingInfo = false;
    },
    
    // 查看建筑详情
    viewBuildingDetail() {
      // 可以跳转到详情页或展示更多信息
      uni.showToast({
        title: '功能开发中',
        icon: 'none'
      });
    }
  }
}
</script>

<style>
.map-container {
  position: relative;
  width: 100%;
  height: 100vh;
  padding: 0;
}

.map-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.tx-map {
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
}

/* 控制面板 */
.control-panel {
  position: absolute;
  top: 30rpx;
  right: 30rpx;
  z-index: 100;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 12rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.panel-item {
  padding: 20rpx 30rpx;
  border-bottom: 1px solid #eee;
}

.panel-item:last-child {
  border-bottom: none;
}

.panel-text {
  font-size: 28rpx;
  color: #333;
}

/* 加载提示 */
.loading {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

.loading-icon {
  width: 80rpx;
  height: 80rpx;
  border: 6rpx solid #f3f3f3;
  border-top: 6rpx solid #007AFF;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 20rpx;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-text {
  font-size: 28rpx;
  color: #fff;
}

/* 建筑信息弹窗 */
.building-info {
  position: absolute;
  bottom: 40rpx;
  left: 40rpx;
  right: 40rpx;
  background-color: #fff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.15);
  z-index: 200;
  overflow: hidden;
}

.info-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 30rpx;
  border-bottom: 1px solid #eee;
}

.info-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.info-close {
  font-size: 40rpx;
  color: #999;
  padding: 0 10rpx;
}

.info-content {
  padding: 20rpx 30rpx;
}

.info-item {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 10rpx;
  display: block;
}

.info-footer {
  padding: 20rpx 30rpx;
  border-top: 1px solid #eee;
}

.info-btn {
  height: 70rpx;
  line-height: 70rpx;
  font-size: 28rpx;
  background-color: #007AFF;
  color: #fff;
  border-radius: 35rpx;
}
</style>